<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<style type="text/css">
		html,body{
		    margin: 0;
		    height: 100%;
		}
		body{
		    display: flex;
		    justify-content: center;
		    align-items: center;
		}
		.btn{
		   width: 390px;
		   height: 120px; 
		   color: #fff; 
		   background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
		   font-family: 'Lato', sans-serif;
		   font-weight: 500;
		   border-radius: 10px;
		   box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
		   7px 7px 20px 0px rgba(0, 0, 0, .1),
		   4px 4px 5px 0px rgba(0, 0, 0, .1);
		   transition: all 0.3s ease;
		   cursor: pointer;
		   border: none;
		   position: relative;
		   line-height: 120px;
		   padding: 0;
		}
		.btn span{
		    position: relative;
		    display: block;
		    width: 100%;
		    height: 100%;
		    font-size: 48px;
		}
		.btn::before,.btn::after{
		    position:absolute;
		    content: '';
		    top: 0;
		    right: 0;
		    background: rgba(2, 126, 251, 1); 
		    transition: all 0.3s ease;
		}
		.btn::before{
		    width: 0;
		    height: 2px;
		}
		.btn::after{
		    height: 0;
		    width: 2px;
		}
		.btn span::before,
		.btn span::after{
		    position:absolute;
		    content: '';
		    bottom: 0;
		    left: 0;
		    background: rgba(2, 126, 251, 1);
		    transition: all 0.3s ease;
		}
		.btn span::before{
		    width: 0;
		    height: 2px;
		}
		.btn span::after{
		    height: 0;
		    width: 2px;
		}
		
		.btn:hover{
		    background: transparent;
		    color: rgba(2, 126, 251, 1);
		}
		
		.btn:hover::before{
		    width: 100%;
		}
		.btn:hover::after{
		    height: 100%;
		}
		.btn span:hover::before{
		    width: 100%;
		}
		.btn span:hover::after{
		    height: 100%;
		}
	</style>
	<body>
		<button class="btn"><span>苏苏就是小苏苏</span></button>
	</body>

</html>
